import { Alert, Tabs, Tooltip } from "antd";
import React, { Fragment, useMemo } from "react";
import Earbuds2Earbuds from "./components/Earbuds2Earbuds";
import { useInterval, useRequest } from "ahooks";
import { audioSynthesisV1ControllerGlobal } from "@/services/auto/audioSynthesis";
import Provider from "@/pages/personal/cloud-audition/components/Provider";
import {
  AUDIO_SYNTHESIS_COUNT_BY_PER_USER_PER_DAY,
  AUDIO_SYNTHESIS_FILE_CLEAN_DAYS,
  AudioSynthesisStatus
} from "common/utils/data";
import dayjs from "dayjs";
import { ApartmentOutlined, ClusterOutlined, DatabaseOutlined, TeamOutlined } from "@ant-design/icons";

export default function (){
  const {
    data: globalData,
    runAsync: globalRun,
  } = useRequest(audioSynthesisV1ControllerGlobal);

  useInterval(()=>{
    if(document.visibilityState === 'visible'){
      globalRun();
    }
  }, 15000);

  const globalWorkList = useMemo(()=>{
    return globalData?.globalWorkList.sort((a,b)=>{
      return (
        (a.status === AudioSynthesisStatus.WAITING ? 1 : 0) - (b.status === AudioSynthesisStatus.WAITING ? 1 : 0)
      ) || (
        dayjs(a.createTime).valueOf() - dayjs(b.createTime).valueOf()
      )
    })
  },[globalData?.globalWorkList])

  return <div className="workbench-tab-container">
    <Provider globalWorkList={globalWorkList} onCheckStatusUuidsChange={globalRun}>
      <Tabs
        type="card"
        items={[
          {
            label: '耳机到耳机',
            key: 'earbuds2Earbuds',
            children: <Earbuds2Earbuds onAdd={()=>{
              globalRun();
            }} />
          }
        ]}
        tabBarExtraContent={globalData && <Alert message={<div className="flex items-center gap-[16px]">
          <div className="flex items-center gap-[4px]"><Tooltip title="服务器最大并行任务数"><ClusterOutlined style={{color: 'var(--primary-color)', fontSize: 16}} /></Tooltip> {globalData.countByServerParallel}个</div>
          <div className="flex items-center gap-[4px]"><Tooltip title="您今天还可以创建任务"><DatabaseOutlined style={{color: 'var(--primary-color)', fontSize: 16}} /></Tooltip> {AUDIO_SYNTHESIS_COUNT_BY_PER_USER_PER_DAY - globalData.userCountPerDay}个</div>
          <div className="flex items-center gap-[4px]"><Tooltip title="当前服务器排队与进行中任务"><TeamOutlined style={{color: 'var(--primary-color)', fontSize: 16}} /></Tooltip> {globalData.globalWorkList.length}个</div>
        </div>}/>}
      />
    </Provider>
  </div>
}
